import classNames from "classnames";
import React, { CSSProperties, FC } from "react";
import styles from "./index.module.less";

/** 按钮尺寸*/
enum ButtonSize {
  Large = "large",
  Sm = "sm",
}

/** 按钮类型 */
enum ButtonType {
  Default = "default",
  Danger = "Danger",
  Link = "link",
}

interface ButtonBaseProps {
  size: ButtonSize;
  btnType: ButtonType;

  href?: string;
  children?: React.ReactNode;
  className?: string;
}

type SumButton = ButtonBaseProps & React.ButtonHTMLAttributes<HTMLElement>;

type AButton = ButtonBaseProps & React.AnchorHTMLAttributes<HTMLElement>;

type ButtonProps = Partial<SumButton & AButton>;

const Button: FC<ButtonProps> = (props) => {
  const {
    className,
    children,
    btnType = "default",
    size = "",
    href,
    disabled,
    ...restProps
  } = props;

  const cnames = classNames(styles.btn, className, {
    [`${styles.btn}.${btnType}`]: btnType,
    [`${styles.disabled}`]: disabled,
  });
  if (btnType === ButtonType.Link) {
    return (
      <a href={href} {...restProps}>
        {children}
      </a>
    );
  } else {
    return (
      <button className={cnames} {...restProps}>
        {children}
      </button>
    );
  }
};

export default Button;
